<template>
  <div class="article-container">
    <div class="header">
      <Header></Header>
    </div>
  
  <!-- 轮播图 -->
  <section class="swipe">
   <van-swipe v-if="bannerList.length>0" :autoplay="3000"  indicator-color="white" lazy-render>
      <van-swipe-item v-for="item in bannerList" :key="item.id">
        <router-link :to="`/detail/${item.id}`" class="content">
        <img :src="item.picture" alt=""/>
        <div class="mark">
          <h3 class="title">{{item.title}}</h3>
          <span class="tip">{{item.author}}</span>
        </div>
        </router-link>
      </van-swipe-item>
   </van-swipe>
  </section >
 <!-- 文章列表 -->
 <van-skeleton title :row="4" v-if="newsList.length===0" />
 <van-skeleton title :row="5" v-if="newsList.length===0" />
 <div v-else>
  <section class="news-box" v-for=" (item,index) in newsList" :key="index"> 
    <van-divider content-position="left" v-if="index!==0">
      {{formatTime(item.date,"{1}月{2}日")}}
    </van-divider>
   <div class="content" >
    <Item  v-for="item2 in item.list" :key="item2.id" :data="item2"  />
   </div>
 </section>
</div>
 <!-- <div class="lazy-more" v-show="newsList.length!==0"  ref="loadMore">
  <van-loading size="14px">小霖为你准备精彩数据中...</van-loading>
 </div> -->
  </div>
</template>

<script setup>
import {ref,reactive,toRefs,onBeforeMount,onMounted} from "vue"
import{useRouter}from 'vue-router'
const router =useRouter();  
import { Toast, Dialog } from 'vant';
import 'vant/es/toast/style'
import Header from './components/Header.vue'
import Item from './components/Item.vue'
import {queryNewsLatest,queryNewsBefore ,getAllArticle} from '@/services/article'
import{formatTime}from '@/utils/util'

 // 定义数据
 const today = ref(null);
 //文章列表数据
const newsList = ref([]);
//轮播图数据
const bannerList = ref([]);

const now=new Date()
// console.log(now.getFullYear())

const time='20231024'
let loadMore=ref(null)

//第一次加载获取数据
onBeforeMount(async()=>{
  // const res = await queryNewsLatest();
  const listData =await getAllArticle()
  // console.log(listData.data)
  let{date,list,banner}=listData.data
// let {date,stories,top_stories}=res.data
today.value=date;
newsList.value.push({
  date,list
})
bannerList.value=banner
})
//第一次渲染完：加载更多数据
// onMounted(()=>{
//   let ob=new IntersectionObserver(async(changes)=>{
//     let item=changes[0];
//     if(item.isIntersecting){
//       let res =await queryNewsBefore(
//         newsList.value[newsList.value.length-1]["date"]
//       )
//       let result=res.data
//       newsList.value.push(Object.freeze(result))
//       // console.log(newsList.value)
//     }
//   })
//   ob.observe(loadMore.value)
// })






</script>

<style lang="scss" scoped>

.article-container{
  margin-bottom: 48px;
  .header{
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;

  }
  /* 轮播图样式 */
  .swipe{
    margin-top: 40px;
    box-sizing: border-box;
    height:180px;
    background: #d5d5d5;
    .van-swipe {
      height: 100%;
      background: #fff;
       .content {
        position: relative;
        color: #fff;
         display: block;
         height: 100%;
            img{
               display: block;
               height: 100%;
               width: 100%;
            }
            .mark{
              position: absolute;
              bottom: 0;
              left: 0;
              box-sizing: border-box;
              padding: 10px 20px;
              width: 100%;
              height: 90px;
              background: rgba(0,0,0,0.3);
              background: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.6));
              .title{
                padding-top: 10px;
                font-size: 18px;
                line-height: 20px;
                max-height: 50px;
                overflow: hidden;
                font-family: '宋体';
              }
              .tip{
                font-family: '宋体';
                font-size: 13px;
                line-height: 26px;
              }
            }
       }

       :deep .van-swipe__indicators{
           left:auto;
           right: 15px;
           transform: none;
         
           .van-swipe__indicator--active{
             width: 15px;
             border-radius: 2px;
             background:#fff;
          }
       }
    }
  }
/* 文章列表样式 */
.news-box{
  padding: 0 15px;
  .van-divider{
    margin: 5px 0;
    font-size: 12px;
    &:before{
      display: none;
    }
  }
}
.van-skeleton{
  padding: 20px 15px;
}
.lazy-more{
  display: flex;
  justify-content: center;
  padding:10px;
}



}



</style>
